<!--aaa页面 父组件-->
<template>
  <div class="tabZujian">
    <!-- 页面跳转 -->
    <el-tabs v-model="activeName" class="tab" @tab-click="handleClick">
      <!-- 按钮 -->
      <div class="Immobility">
        <!-- 展开隐藏 -->
        <el-form ref="form" :model="form" label-width="80px">
          <el-row>
            <el-col :span="8">
              <el-form-item size="small" label="产品名称" style="width: 80%;">
                <el-input v-model="form.name" placeholder="请输入产品名称" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item size="small" label="产品类型" style="width: 80%;">
                <el-select v-model="form.type" class="width-full" placeholder="请选择产品类型">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item size="small" label="生成时间">
                <el-date-picker
                  v-model="form.date"
                  class="width-full"
                  align="right"
                  type="date"
                  style="width: 75%;"
                  placeholder="选择日期"
                  :picker-options="pickerOptions"
                />
              </el-form-item>
            </el-col>

            <!-- 收起隐藏部分 -->
            <el-collapse-transition>
              <!-- 这里我们用v-show来判断是否显示那些被深深包裹的检索条件，还涉及到一个知识点，
              我们用v-show而不用v-if，是因为这里需要频繁切换，v-show和v-if应用不清楚
              的同学要去好好学习一下啦-->
              <div v-show="advanced">
                <el-col :span="8">
                  <el-form-item size="small" label="产品名称">
                    <el-date-picker
                      v-model="form.date"
                      class="width-full"
                      align="right"
                      type="date"
                      style="width: 75%;"
                      placeholder="选择日期"
                      :picker-options="pickerOptions"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item size="small" label="产品名称" style="width: 80%;">
                    <el-input v-model="form.name" placeholder="请输入产品名称" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item size="small" label="生成时间" style="width: 80%;">
                    <el-select v-model="form.type" class="width-full" placeholder="请选择产品类型">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item size="small" label="产品类型">
                    <el-date-picker
                      v-model="form.date"
                      class="width-full"
                      align="right"
                      type="date"
                      style="width: 75%;"
                      placeholder="选择日期"
                      :picker-options="pickerOptions"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item size="small" label="产品名称" style="width: 80%;">
                    <el-input v-model="form.name" placeholder="请输入产品名称" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item size="small" label="产品类型" style="width: 80%;">
                    <el-select v-model="form.type" class="width-full" placeholder="请选择产品类型">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </div>
            </el-collapse-transition>
          </el-row>
        </el-form>

        <!-- 新增菜单 -->

        <el-dialog title="新增" :visible.sync="dialogFormVisible" width="60%">
          <el-form :model="form" ref="ruleForm" label-width="100px">
            <el-row>
            <el-col :span="8">
              <el-form-item size="small" label="产品名称">
                <el-input v-model="form.name" placeholder="请输入产品名称" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item size="small" label="状态">
                <el-input v-model="form.name" placeholder="请输入产品名称" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item size="small" label="产品价格">
                <el-input v-model="form.name" placeholder="请输入产品名称" />
              </el-form-item>
            </el-col>
          </el-row>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
            <el-button size="mini" type="primary" @click="handleSave">确 定</el-button>
          </div>
        </el-dialog>
        

        <!-- 固定栏 -->
        <el-row>
          <el-col :span="12">
            <el-button type="primary" size="mini">潜在供应商</el-button>
            <el-button type="success" size="mini" @click="dialogFormVisible = true">新增供应商</el-button>
            <el-button type="primary" size="mini">导基本信息</el-button>
            <el-button type="success" size="mini">导联系方式</el-button>
            <el-button type="primary" size="mini">导出供应商列表</el-button>
          </el-col>
          <el-col :span="12" style="text-align: right;padding-right:30px;">
            <el-button icon="el-icon-edit" size="mini" circle></el-button>
            <el-button icon="el-icon-share" size="mini" circle></el-button>
            <el-button size="mini" title="搜 索" circle>
              <a  @click="toggleAdvanced">
                <i :class="advanced ? 'el-icon-search' : 'el-icon-search'" />
              </a>
                <!-- 展开收起提示 -->
                {{ advanced ? '' : '' }}
            </el-button>
          </el-col>
        </el-row>
      </div>

      <!-- 跳转 -->
      <el-tab-pane label="正式库" name="first" :key="'first'">
        <child1 v-if="isChildUpdate1"></child1>
      </el-tab-pane>
      <el-tab-pane label="备用库" name="second" :key="'second'">
        <child2 v-if="isChildUpdate2"></child2>
      </el-tab-pane>
      <el-tab-pane label="全部" name="autism" :key="'autism'">
        <child3 v-if="isChildUpdate3"></child3>
      </el-tab-pane>
    </el-tabs>
    <!-- 分页 -->
    <div class="green">
      <div class="block">
        <!-- <span class="demonstration">完整功能</span> -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination>
      </div>
    </div>



  </div>
</template>
<script>
import ZongLanProcess from "./red";
import ytProcess from "./red003";
import lautism from "./red007";
export default {
  name: "tabZujian",

  components: {
    child1: ZongLanProcess,
    child2: ytProcess,
    child3: lautism,
  },
  data() {
    return {
      // el-dialog 隐藏
      dialogFormVisible: false,
      // 默认第一个选项卡
      activeName: "first",
      isChildUpdate1: true,
      isChildUpdate2: false,
      isChildUpdate3: false,

      // 分页
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,

      //select选项
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      },
      //我们给搜索条件绑定的表单对象
      form: {
        name: '',
        type: '',
        date: ''
      },
      advanced: false,//这个是关键，我们用它来判断展开/收起

    };
  },
  mounted() {

  },
  methods: {
    //一个简单的js，点击文字，改变状态
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    handleSave () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          console.log('输入正确')
          this.dialogFormVisible = false
        } else {
          console.log('输入错误')
        }
      })
    },
    handleClick(tab) {
      if (tab.name === "first") {
        this.isChildUpdate1 = true;
        this.isChildUpdate2 = false;
        this.isChildUpdate3 = false;
        this.isChildUpdate4 = false;
      } else if (tab.name === "second") {
        this.isChildUpdate1 = false;
        this.isChildUpdate2 = true;
        this.isChildUpdate3 = false;
        this.isChildUpdate4 = false;
      } else if (tab.name === "autism") {
        this.isChildUpdate1 = false;
        this.isChildUpdate2 = false;
        this.isChildUpdate3 = true;
        this.isChildUpdate4 = false;
      }
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
 
    
  },
};
</script>

<style lang="less" scoped>
.tabZujian {
  border: 1px solid #000;
  width: calc(80% - 1rem);
  height: 100%;
  margin: 0 auto;
  .tab {
    width: calc(100% - 1rem);
    margin: 0 auto;
    border-radius: 5px;
    .Immobility {
      width: calc(100% - 1rem);
      padding: 1rem;
    }
  }
  .green {
    width: calc(100% - 1rem);
    margin: 0 auto;
    padding: 0.2rem;
    text-align: right;
  }
}


</style>